<template>
    <el-breadcrumb separator="/" class="breadcrumb" >
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,index) in breadcrumbData" :key="item.path" :to="item.path">

            <!-- 不可点击 -->
            <span v-if="index === breadcrumbData.length -1" class="no-redirect">{{item.meta.title}}</span>
            <!-- 可点击 -->
            <span v-else>{{item.meta.title}}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbData = ref([])

const getBreadcrumbData = (route) => {
    breadcrumbData.value = route.matched.filter(item => item.meta && item.meta.title)
}

watch( route, () => {
    getBreadcrumbData(route)
    
},{
    immediate:true
})

</script>

<style lang="scss" scoped>
.breadcrumb{
    font-size: 16px;
    margin-left: 10px;
}
.no-redirect{
    color: #97a8be!important;
    cursor: text;
}
</style>